@import "../../styles/prefix";

$at-action-sheet-duration: 300ms;
$zindex-action-sheet: 1010;

.#{$component-prefix}popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: visibility $at-action-sheet-duration cubic-bezier(0.36, 0.66, 0.04, 1);
  z-index: $zindex-action-sheet;

  &-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    transform: translate3d(0, 100%, 0);
    z-index: $zindex-action-sheet;
    transition: transform $at-action-sheet-duration cubic-bezier(0.36, 0.66, 0.04, 1);
  }

  &-header {
    padding: 16px 24px;
  }

  &-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    color: #c8c9cc;
    size: 16px;
    cursor: pointer;
  }

  .#{$component-prefix}popup-body {
    padding: 14px;
  }
}

.#{$component-prefix}popup.#{$component-prefix}active {
  visibility: visible;

  .#{$component-prefix}popup-overlay {
    opacity: 1;
  }

  .#{$component-prefix}popup-container {
    transform: translate3d(0, 0, 0);
  }
}
